import "../static/libs/flexible"
import "../scss/common.scss"
import "../scss/exercises.scss"
import http from "../utils/http"

let startX, endX, dis = 0; //第一次触碰的焦点 ，最后触碰的焦点 ，滑动距离
//类型id
const typeId = location.search.substr(1).split("-")[0]
//试卷id
const testId = location.search.substr(1).split("-")[1]
//页码
let onPage = 0
//答案数组
let arr = []
//收藏数组
let collection = []

//暂停时间
let timer = 0

async function main() {
    //根据试卷id获取试卷
    const { data } = await http({ url: "/tests/findById?id=" + testId })
    //题目集合
    const exercises = data.exercises
    arr.length = exercises.length
    collection.length = exercises.length

    //渲染题
    renderExercises(exercises[onPage])

    //点击切换题目
    fanye(exercises)

    //渲染倒计时
    countdown()

    //渲染题目数量
    renderExercisesCounts(exercises)

    //点击提交按钮
    clickSubmit(exercises)

    //点击收藏
    collectionExercises(exercises)

    //控制收藏点亮的方法
    controlCollectionLight()



}
main()

//翻页
function fanye(exercises) {
    //获取第一次触碰屏幕的焦点startY的事件
    document.addEventListener('touchstart', function (e) {
        var touch = e.touches[0];
        startX = touch.pageX;
    })

    //获取最后触摸的焦点endY , 算出滑动屏幕的距离dis的事件
    document.addEventListener('touchmove', function (e) {
        var touch = e.touches[0];
        endX = touch.pageX;
        dis = startX - endX;
    })

    //滑动事件结束 如果手指滑动距离大于200 并且正向则执行pageTop函数 -->向上滑动翻页
    //滑动事件结束 如果手指滑动距离大于200 方向为负则执行pageDown函数 -->向下滑动翻页
    //翻页完毕 执行qingling函数 进行数值清零
    document.addEventListener('touchend', function (e) {
        //Math.abs 返回绝对值
        if (Math.abs(dis) > 200) {
            if (dis > 0) {
                if (onPage >= exercises.length - 1) alert("这是最后一题")
                else {
                    //渲染下一题
                    onPage++
                    renderExercises(exercises[onPage])
                    //渲染题目数量
                    renderExercisesCounts(exercises)
                    //控制收藏点亮的方法
                    controlCollectionLight()
                }
            } else {
                if (onPage <= 0) alert("这是第一题")
                else {
                    //渲染上一题
                    onPage--
                    renderExercises(exercises[onPage])
                    //渲染题目数量
                    renderExercisesCounts(exercises)
                    //控制收藏点亮的方法
                    controlCollectionLight()
                }
            }
        }
        //归零
        reset()
    })
}

//渲染题目
async function renderExercises(data) {
    $("main .boxx").html(`
    <div class="title">
        <p>${data.answer.length <= 1 ? '单选题' : '多选题'}</p>
        <span>${data.topics}</span>
    </div>
    <!-- 选项 -->
    <div class="option">
        <input type="radio" value="A" name="name"><label> ${data.options[0]}</label><br>
        <input type="radio" value="B" name="name"><label> ${data.options[1]}</label><br>
        <input type="radio" value="C" name="name"><label> ${data.options[2]}</label><br>
        <input type="radio" value="D" name="name"><label> ${data.options[3]}</label><br>
    </div>
    `)
    //渲染之前选中的答案
    renderChoosedAnswer(arr)
    //获取选中答案
    chooseAnswer()
    //归零
    reset()
}

//考试倒计时
function countdown() {
    let data = $(".bigbox .sp2").text()
    //分
    let min = Number(data.split(":")[1])
    //秒
    let sec = Number(data.split(":")[2])
    timer = setInterval(function () {
        sec--
        if (sec == -1) {
            sec = 59
            min--
        }
        $(".bigbox .sp2").text("00:" + min + ":" + (sec < 10 ? "0" + sec : sec))
        //如果倒计时结束 提交试卷
    }, 1000)
}

//右下角题数渲染
function renderExercisesCounts(exercises) {
    $("footer .four span").html(`
    <strong>${onPage + 1}</strong>/${exercises.length}
    `)
    //渲染题目列表
    renderExercisesList(exercises)
    //归零
    reset()
}

//获取选中的答案
function chooseAnswer() {
    $(".page .option [name=name]").on("change", function () {
        const res = $(".page .option [name=name]:checked").val()
        if (res == "A") {
            arr[onPage] = 0
        } else if (res == "B") {
            arr[onPage] = 1
        } else if (res == "C") {
            arr[onPage] = 2
        } else if (res == "D") {
            arr[onPage] = 3
        }
    })
}

//渲染之前选中的答案
function renderChoosedAnswer(arr) {
    //循环数组，查看是否有值
    if (arr[onPage] != undefined) {
        $(".page .option [name=name]").eq(arr[onPage]).attr("checked", "checked")
    }
    //归零
    reset()
}

//点击提交按钮
function clickSubmit(exercises) {
    $("footer .three p").on("click", async function () {
        //判断题是否答完
        if (arr.includes(undefined) || arr.length != exercises.length) {
            //没有答完提示用户 （显示提示窗口
            $(".gray").css("display", "block")
            //点击继续答题隐藏提示窗口
            $(".gray #cancel").on("click", function () {
                $(".gray").css("display", "none")
            })
        } else {
            clearInterval(timer)
            let time = $(".bigbox .sp2").text()
            //分
            let min = 59 - Number(time.split(":")[1])
            //秒
            let sec = 59 - Number(time.split(":")[2])
            //拼接考试时长
            time = "00:" + (min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec)
            //学生id
            const stuId = JSON.parse(localStorage.getItem("userInfo") || "{}")._id
            //要提交的试卷
            let obj = {
                durations: time,   //答题时长
                studentId: stuId,  //学生id
                testId, //试卷id
                typeId, //类型id
                answers: JSON.stringify(arr)    //答案
            }
            //发送试卷到后端处理
            //返回已考试卷id
            const { data } = await http({ url: "/testeds/getStuTest", method: "POST", data: obj })
            //点击提交后，修改该试卷状态为无效
            const res = await http({ url: "/tests/updateTestState?id=" + testId })

            //先判断有没有收藏题
            const isSelected = collection.findIndex(item => item != undefined)
            if (isSelected != -1) {
                //收藏的试题发送到后端
                const collectionRes = await http(
                    {
                        url: "/collections/getStuCollections",
                        method: "POST",
                        data: { studentId: stuId, collectionsArr: JSON.stringify(collection) }
                    }
                )
            }

            //携带已考试卷id ， 跳转到考试完成页面
            window.location.assign("finishTest.html?" + data + "-" + testId)
        }
    })
}

//点击右下角题数弹出题目列表
function renderExercisesList(exercises) {
    $("footer .four").on("click", function () {
        $(".grayy").css("display", "block")
        //控制题目列表的页码
        $(".grayy .four span").html(`<strong>${onPage + 1}</strong>/${exercises.length}`)
        $(".grayy .danxuan p").html(`单选题(共${length}题,合计${exercises.length * 3}分)`)
        //渲染题号
        //控制题目列表收藏小图标
        controlCollectionIcon(exercises)
        //滑动隐藏题目列表
        displayExercisesList()
        //控制题目列表的题已做未做状态
        controlExercisesListState(exercises.length)
    })
}

//坐标归零
function reset() {
    startX = 0
    endX = 0
    dis = 0
}

//滑动或点击隐藏题目列表
function displayExercisesList() {
    let startY, endY, disss = 0
    //获取第一次触碰屏幕的焦点startY的事件
    document.addEventListener('touchstart', function (e) {
        var touch = e.touches[0];
        startY = touch.pageY;
    })

    //获取最后触摸的焦点endY , 算出滑动屏幕的距离dis的事件
    document.addEventListener('touchmove', function (e) {
        var touch = e.touches[0];
        endY = touch.pageY;
        disss = startY - endY;
    })

    //滑动事件结束 如果手指滑动距离大于200 并且正向则执行pageTop函数 -->向上滑动翻页
    //滑动事件结束 如果手指滑动距离大于200 方向为负则执行pageDown函数 -->向下滑动翻页
    //翻页完毕 执行qingling函数 进行数值清零
    document.addEventListener('touchend', function (e) {
        //Math.abs 返回绝对值
        if (Math.abs(disss) > 200) {
            if (disss > 0) {
                resetList()
            } else {
                $(".grayy .list").addClass("fade")
                setTimeout(function () {
                    $(".grayy .list").removeClass("fade")
                    $(".grayy").css("display", "none")
                    resetList()
                }, 400)
                resetList()
            }
            resetList()
        }
        resetList()
    })
    function resetList() {
        startY = 0
        endY = 0
        disss = 0
    }

    $(".grayy .on .three p").on("click", function () {
        $(".grayy .list").addClass("fade")
        setTimeout(function () {
            $(".grayy .list").removeClass("fade")
            $(".grayy").css("display", "none")
            resetList()
        }, 300)
    })
}

//点击收藏
function collectionExercises(exercises) {
    //底部收藏
    $("footer .one").on("click", function () {
        if (collection[onPage] != undefined) {
            //取消收藏
            collection[onPage] = undefined
        } else {
            //添加收藏
            collection[onPage] = exercises[onPage]._id
        }
        //控制收藏点亮的方法
        controlCollectionLight()
    })
    //题目列表收藏
    $(".grayy .on .one").on("click", function () {
        if (collection[onPage] != undefined) {
            //取消收藏
            collection[onPage] = undefined
        } else {
            //添加收藏
            collection[onPage] = exercises[onPage]._id
        }
        //控制收藏点亮的方法
        controlCollectionLight()//控制题目列表收藏小图标
        controlCollectionIcon(exercises)
    })
}

//控制收藏点亮的方法
function controlCollectionLight() {
    //判断该题是否收藏
    if (collection[onPage] != undefined) {
        //点亮收藏
        $("footer .one").css("color", "#fe8545")
        $(".grayy .on .one").css("color", "#fe8545")
    } else {
        //添加收藏
        $("footer .one").css("color", "#8f8a8a")
        $(".grayy .on .one").css("color", "#8f8a8a")
    }
}

//控制题目列表收藏小图标 和题号
function controlCollectionIcon(exercises) {
    let tempArr = ``
    for (let i = 0; i < exercises.length; i++) {
        //判断该题是否被收藏
        tempArr += `<div class="one">${collection[i] != undefined ? "<i class='fa fa-star'></i>" : ""} ${i + 1} </div>`
    }
    $(".grayy .danxuan .tihao").html(tempArr)
    //控制题目列表的题已做未做状态
    controlExercisesListState(exercises.length)
    //点击题目列表的题号，定位到该题
    clickExerciseNumLocate(exercises)
}

//控制题目列表的题已做未做状态
function controlExercisesListState(length) {
    for (let i = 0; i < length; i++) {
        if (arr[i] != undefined) $(".grayy .danxuan .one").eq(i).removeClass("notChoose")
        else $(".grayy .danxuan .one").eq(i).addClass("notChoose")
    }
}

//点击题目列表的题号，定位到该题
function clickExerciseNumLocate(exercises) {
    $(".grayy .danxuan .one").on("click", function () {
        //调用渲染题的方法，参数为题目对象参数
        onPage = $(this).text().trim() - 1
        //控制题目列表的页码
        $(".grayy .four span").html(`<strong>${onPage + 1}</strong>/${exercises.length}`)
        $(".grayy .danxuan p").html(`单选题(共${length}题,合计${exercises.length * 3}分)`)
        //渲染题目
        renderExercises(exercises[onPage])
        //控制收藏点亮的方法
        controlCollectionLight()
    })
}